<template>
  <div id="main" style="height: 100%;width: 100%;"></div>
</template>

<script>
import * as echarts from "echarts";
import china from '@/utils/china.json'
import "echarts-gl"

export default {

  name: "echarts-map.vue",
  mounted() {
    var myChart = echarts.init(document.getElementById("main"));
    echarts.registerMap('china', china);
    let option = {
      geo3D: {
        map: 'china',
        //标签样式

        // shading: "lambert",
        light: {
          //光照阴影
          main: {
            // color: "#fff", //光照颜色
            intensity: .7, //光照强度
            // shadowQuality: 'high', //阴影亮度
            shadow: true, //是否显示阴影
            shadowQuality: "medium", //阴影质量 ultra //阴影亮度
            alpha: 55,
            beta: 10
          },
          ambient: {
            intensity: 0.7
          }
        },
        itemStyle: {
          borderWidth: .7,
          color: 'rgba(26, 109, 194)',
          opacity: .4,
          borderColor: '#169C89',
        },
        label: {
          // normal:{
          show: false,
          color: "white",
          // formatter: function ({name}) {
          //   return name+" "
          // }
          // }
        },
        emphasis: {
          label: {
            show: false,
            color: "red"
          }
        },

        viewControl: {
          alpha: 70,
          distance: 100,
        },
        regions: [
          {
            name: "四川省",
            label: {
              show: true,
              color: "white",
              fontSize: 17,
              fontWeight: "bold"
            },
            itemStyle: {
              color: "#169C89",
            }
          }
        ],
        instancing: true,
        series: []
      },
    };
    myChart.setOption(option);
  },
}
</script>

<style scoped>

</style>
